<template>
  <div class="luckDraw">
    <Com-title title="幸运大转盘100%有奖-塞拉菲娜" />
    <div class="container">
      <div class="turntable-wrapper">
        <div class="luck-wrapper">
          <ul class="nineGrid">
            <li class="row">
              <div v-for="(n, key) in 4" :key="n" :class="index === key ? `active` : ``">
                <div class="wrapper">
                  <img v-if="key == 0" src="./imgs/cp/1.jpg">
                  <img v-else-if="key == 1" src="./imgs/cp/2.jpg">
                  <img v-else-if="key == 2" src="./imgs/cp/3.jpg">
                  <img v-else-if="key == 3" src="./imgs/cp/4.jpg">
                </div>
                <div class="mask"></div>
              </div>
            </li>
            <li class="row">
              <div class="center-item11" :class="index === 11 ? 'center-item active': 'center-item'">
                <div class="wrapper">
                  <img src="./imgs/cp/12.jpg" alt="">
                </div>
                <div class="mask"></div>
              </div>
              <div class="center-item10" :class="index === 10 ? 'center-item active': 'center-item'">
                <div class="wrapper">
                  <img src="./imgs/cp/11.jpg" alt="">
                </div>
                <div class="mask"></div>
              </div>
              <div class="getLuck" @click="startLottery">
                <img src="./imgs/btn-start.jpg" alt="">
              </div>
               <div class="center-item4" :class="index === 4 ? 'center-item active': 'center-item'">
                <div class="wrapper">
                  <img src="./imgs/cp/5.jpg" alt="">
                </div>
                <div class="mask"></div>
              </div>
              <div class="center-item5" :class="index === 5 ? 'center-item active': 'center-item'">
               <div class="wrapper">
                 <img src="./imgs/cp/6.jpg" alt="">
               </div>
               <div class="mask"></div>
             </div>
            </li>
            <li class="row">
              <div v-for="(n, key) in 4" :key="n" :class="index === 9-key ? `active` : ``">
                <div class="wrapper">
                  <img v-if="key == 0" src="./imgs/cp/10.jpg">
                  <img v-else-if="key == 1" src="./imgs/cp/9.jpg">
                  <img v-else-if="key == 2" src="./imgs/cp/8.jpg">
                  <img v-else-if="key == 3" src="./imgs/cp/7.jpg">
                </div>
                <div class="mask"></div>
              </div>
            </li>
          </ul>
        </div>

        <div class="mycontent">
            <div class="lottery_ticket"><div @click="clickGetLottery()" class="btn-lottery">输入抽奖码获取抽奖机会</div></div>
        </div>

        <div class="tip">
            <div class="tip-title">活动规则</div>
            <div class="tip-content">
                <p> 1.输入一个抽奖码可获得一次抽奖机会，每个抽奖码只能使用一次；</p>
                <p> 2.抽到代金券请截图保存抽奖码去店里消费使用，抽到实物礼品请填写收货地址（包邮）；</p>
                <p> 3.抽奖和填写地址过程中请勿关闭或者刷新页面，避免数据丢失；</p>
                <p> 4.活动最终解析权归塞拉菲娜所有。</p>
            </div>
        </div>
      </div>
    </div>


    <div class="toast" id="pop-toast" data-attr="奖品弹框" v-show="toast_control">
      <div class="toast-container">
        <div class="close" @click="close_toast()"></div>
        <div class="pop-container">
          <div class="pop-head">
            <img v-if="prizeItemMsg.img" :src="prizeItemMsg.img">
            <span v-else class="pop-money">{{prizeItemMsg.des}}</span>
            <p class="pop-name">
              {{prizeItemMsg.name}}
            </p>
          </div>
          <div class="pop-main">
            <p>恭喜您获得</p>
            <p>“{{prizeItemMsg.name}}”</p>
            <p class="daijin" v-if="isDaijin">*请保存该抽奖码前往店消费使用：{{daijinCode}}</p>
          </div>
        </div>
        <div class="toast-btn pop-btn"   @click="clickGetAddr(prizeItemMsg)"></div>
      </div>
    </div>

    <div class="toast" v-show="toast_giftCode" data-attr="抽奖码弹框">
        <div class="toast-container">
            <img src="./img/code_title.png" class="toast-picture">
            <div class="close" @click="close_giftCode()"></div>
            <div class="toast-title">
                <input class="code_input" v-model="codeNumber" type="text" name="" placeholder="请输入抽奖码" value="">
            </div>
            <div class="toast-btn">
                <button type="button" class="toast-cancel"  @click="clickClodeSure()" name="button">确定</button>
            </div>
        </div>
    </div>
    <div class="toast-mask" v-show="toast_control || toast_giftCode"></div>
  </div>
</template>
<script>
import api from "@/fetch/api"
import { Button, Toast } from 'mint-ui';
import ComTitle from '@/common/ComTitle.vue'

import $ from "jquery"
export default {
name: 'luckDraw',
data () {
  return {
    downline: true, //活动是否结束
    downlineText: '活动已结束，谢谢您的参与！后期还会有丰富的活动，请敬请留意。',// 活动结束提示
    title: '积分转盘',
    index: -1,    // 当前转动到哪个位置，起点位置
    count: 12,    // 总共有多少个位置
    timer: 0,    // 每次转动定时器
    speed: 200,   // 初始转动速度
    times: 0,    // 转动次数
    cycle: 50,   // 转动基本次数：即至少需要转动多少次再进入抽奖环节
    prize: -1,   // 中奖位置
    click: true,
    showToast: false,
    toastType: 'luck',
    toast_control: false,
    codeNumber: '',
    lottery_name: null,
    toast_giftCode: false,
    daijinCode: null,
    prizeItemMsg: {
      "id": 1,
      "name": "代金劵5元",
      "name2": "代金劵5元",
      "type": "1",
      "des": "5元"
    },
    isDaijin: false,
    prize_list: [
      {
        "id": 1,
        "name": "代金劵5元",
        "name2": "代金劵5元",
        "type": "1",
        "des": "5元"
      }, {
        "id": 2,
        "type": "2",
        "name": "塞拉菲娜能量乳一瓶",
        "name2": "塞拉菲娜能量乳",
        "des": "",
        "img":  require("./img/cp/8.png")
      },{
        "id": 3,
        "type": "1",
        "name": "代价卷30元",
        "name2": "代价卷30元",
        "des": "30元"
      }, {
        "id": 4,
        "name": "代金劵10元",
        "name2": "代金劵10元",
        "type": "1",
        "des": "10元"
      }, {
        "id": 5,
        "type": "2",
        "name": "苹果XS手机一台",
        "name2": "苹果XS手机",
        "des": "",
        "img": require("./img/cp/13.jpg")
      }, {
        "id": 6,
        "type": "2",
        "name": "TCL43英寸智能电视机一台",
        "name2": "TCL43英寸智能电视机",
        "des": "100份",
        "img": require("./img/cp/12.jpg")
      }, {
        "id": 7,
        "name": "塞拉菲娜晨露水一瓶",
        "name2": "塞拉菲娜晨露水",
        "type": "2",
        "des": "100份",
        "img":  require("./img/cp/7.png")
      }, {
        "id": 8,
        "type": "2",
        "name": "塞拉菲娜小鲜膜一盒",
        "name2": "塞拉菲娜小鲜膜",
        "des": "100份",
        "img":  require("./img/cp/6.jpg")
      }, {
        "id": 9,
        "type": "2",
        "name": "塞拉菲娜护手霜一盒",
        "des": "300份",
        "name2":  "塞拉菲娜护手霜",
        "img": require("./img/cp/4.png")
      }, {
        "id": 10,
        "type": "2",
        "name": "塞拉菲娜洗面奶一盒",
        "name2": "塞拉菲娜洗面奶",
        "des": "300份",
        "img":  require("./img/cp/5.png")
      }, {
        "id": 11,
        "type": "2",
        "name": "飞科电吹风一台",
        "name2": "飞科电吹风",
        "des": "500份",
        "img": require("./img/cp/10.jpg")
      }, {
        "id": 12,
        "type": "2",
        "name": "美的多功能豆浆机一台",
        "name2": "美的多功能豆浆机",
        "des": "300份",
        "img": require("./img/cp/11.jpg")
      }
    ],//奖品列表
  }
},

props: {

},

components: {
  Button,
  Toast,
  ComTitle
},
created() {
  //微信分享
  var wxShareOpts = {
    title: '幸运大转盘100%有奖活动',
    desc: '为了回馈顾客朋友们，塞拉菲娜举办幸运大转盘活动，丰富礼物等您来拿，100%中奖哦！',
    link: window.location.href.split('#')[0],
    img: 'http://wap.sailafeinav.com/static/img/share-image.jpg'
  }
  console.log(wxShareOpts)
  this.wxShare(wxShareOpts);
},
methods: {
  // 开始抽奖
  startLottery () {
    // 活动结束的提示
    if(this.downline){
      return Toast(this.downlineText);
    }
    if(!this.codeNumber){
      this.toast_giftCode = true;
      return Toast('请输入抽奖码再抽奖');
    }

    if (!this.click) {
      return
    }
    this.speed = 200
    this.click = false
    this.startRoll()

  },

  // 开始转动
  startRoll () {

    this.times += 1  // 转动次数
    this.oneRoll()  // 转动过程调用的每一次转动方法，这里是第一次调用初始化
    // 如果当前转动次数达到要求 && 目前转到的位置是中奖位置
    if (this.times > this.cycle + 10 && this.prize == this.index) {
      clearTimeout(this.timer)   // 清除转动定时器，停止转动
      this.prize = -1
      this.times = 0
      this.click = true
      this.showToast = true
      this.toastType = 'comeOn'
      console.log('你已经中奖了')
      setTimeout(()=>{
        this.toast_control = true;
      }, 500)
    } else {
      if (this.times < this.cycle) {
        this.speed -= 10   // 加快转动速度
      } else if (this.times === this.cycle) {    // 随机获得一个中奖位置
        // const index = parseInt(Math.random() * 10, 0) || 0
        // this.prize = index
        if (this.prize > 12) {
          this.prize = 12
        }
        this.prize = this.prize - 1
        console.log(`中奖位置${this.prize}`);



      } else if (this.times > this.cycle + 10 &&
        ((this.prize === 0 && this.index === 9) || this.prize === this.index + 1)) {
        this.speed += 110
      } else {
        this.speed += 20
      }

      if (this.speed < 40) {
        this.speed = 40
      }
      this.timer = setTimeout(this.startRoll, this.speed)
    }
  },

  // 每一次转动
  oneRoll () {
    let index = this.index  // 当前转动到哪个位置
    const count = this.count  // 总共有多少个位置
    index += 1
    if (index > count - 1) {
      index = 0
    }
    this.index = index
  },

  //关闭弹窗
  close_toast() {
    this.toast_control = false;

  },
  //关闭输入抽奖码的弹框
  close_giftCode() {
    this.toast_giftCode = false;
    this.codeNumber = ''
  },
  //打开输入框
  clickGetLottery() {
    // 活动结束的提示
    if(this.downline){
      return Toast(this.downlineText);
    }else{
      this.toast_giftCode = true;
    }

  },


  //输入之后点击确定


  clickClodeSure() {
    var _this = this;
    $.ajax({
      type: 'post',
      data: {
        code: this.codeNumber
      },
      url: 'http://api.sailafeinav.com/choujiang/v1/',
      success: function(res) {
        console.log(res)
        //抽到的奖品
        _this.prize = res.code;
        console.log(_this.prize)
        _this.setlocalStorage('codeNumber', _this.codeNumber)
        for (var i = 0; i < _this.prize_list.length; i++) {
          var prizeItem = _this.prize_list[i];
          if(prizeItem.id == _this.prize){
            _this.prizeItemMsg = prizeItem;
            _this.toast_giftCode = false;
            _this.startLottery();
            _this.codeNumber = ''
          }
        }
      },
      error: function(res) {
        console.log(res)
        if(res.responseJSON){
          Toast(res.responseJSON.error);
          this.codeNumber = ''
        }else{
          Toast('网络异常，请检查您的网络');
        }
      }
    })
  },

  //立即领取
  clickGetAddr(prize) {
    if(prize.type == '1') {
      console.log('代金券');
      this.isDaijin = true;
      this.daijinCode = this.getlocalStorage('codeNumber');
      // 返回码，提示截图
    }else if(prize.type == '2') {
      console.log('需要邮寄');
      this.$router.push({
        path: "/activity/luckyWheel/address",
        query: {
            code: this.getlocalStorage('codeNumber'),
            type: 2
        }
      });
    }else if(prize.type == '3') {
      console.log('现金红包');
      this.$router.push({
        path: "/activity/luckyWheel/address",
        query: {
            code: this.getlocalStorage('codeNumber'),
            type: 3
        }
      });
    }else{
      console.log('默认');
    }
  }
},

}
</script>

<style style="stylus" scoped>
@import './cj.css';
</style>
